<template>
	<view class="party">
		<view class="party-bc">
			<image :src="imgurl+inpayimg" mode="widthFix"></image>
		</view>
		<view class="party-view">
			<!-- <view class="party-view-top">
				请观看视频后点击签到进入商城
			</view> -->
			<video id="myVideo" :src="sectionInfo.type_config.video_url" @timeupdate="bindtimeupdate"></video>

			<view class="bt-dk" @click="cjfun" v-if="reachFlag==1">
				<image :src="imgurl +signImg"></image>
				<!-- <text>签到</text> -->
			</view>
		</view>



		<!-- <view class="bt-dk" @click="cjfun" v-if="reachFlag==1">
			达标打卡
		</view> -->

		<!-- 	<view class="popup" v-if="showpopup">
			<view class="popup-k">
				<image src="/static/images/Popup.png" mode="widthFix"></image>
				<view class="bt">
					进入商场
				</view>
			</view>
			
		</view> -->
		<u-popup v-model="showpopup" mode="center" border-radius="45" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k fail-kan">
				<!-- <view class="fail-title">
		          	温馨提示
		          </view> -->
				<view class="fail-content">
					恭喜您，签到成功
				</view>
				<view class="fail-bt" @click="goshop">
					进入商城
				</view>
			</view>
		</u-popup>
		<u-popup v-model="failshow" mode="center" border-radius="45" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k ">
				<view class="fail-title">
					温馨提示
				</view>
				<view class="fail-content">
					您已参与，且积分已发放
				</view>
				<view class="fail-bt">
					查看积分
				</view>
			</view>
		</u-popup>

		<u-popup v-model="noinshow" mode="center" border-radius="45" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					对不起暂无活动资格
				</view>
				<view class="fail-content">
					请联系客服咨询
				</view>
				<view class="fail-bt" @click="gohome">
					首页
				</view>
			</view>
		</u-popup>
		<u-popup v-model="norsshow" mode="center" border-radius="35" @close="failclose" @open="failopen"
			:closeable="true" :overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					温馨提示
				</view>
				<view class="fail-content">
					活动人数已满
				</view>
				<view class="fail-bt" @click="gohome">
					首页
				</view>
			</view>
		</u-popup>

		<u-popup v-model="payshow" mode="center" border-radius="10" :mask-close-able="false" :closeable="false"
			:overlay="true">
			<view class="fail-k payshow-k">
				<view class="fail-title jnshow-title">
					活动介绍
				</view>
				<view class="fail-content jnshow-content" v-html="shuoming">
					<!-- {{}} -->
				</view>
				<view class="payshow-bt">
					<button @click="()=>{payshow=false}">我已知晓以上活动内容</button>
				</view>
			</view>
		</u-popup>
	</view>


</template>


<script>
	import {
		getSessionKey,
		grantWxStep,
		getActivityDetails,
		beginActivity,
		signActivity
	} from "@/api/index/index";
	import {
		BASE_URL_IMAHE
	} from "../../../utils/https";

	const app = getApp();
	export default {
		data() {
			return {
				imgurl: BASE_URL_IMAHE,
				historyTime: 0,
				form: {},
				showpopup: false,
				jumpShopLink: "",
				noinshow: false,
				failshow: false,
				norsshow: false,
				sectionInfo: {
					type_config: {
						video_url: ""
					}
				},
				inpayimg: "",
				reachFlag: 0,
				whiteListId: "",
				joinRecordId: "",
				token: '',
				signImg: "",
				shuoming: "",
				payshow: true,
			}
		},
		onLoad(options) {
			var sjs = this.randomWord()
			var datatime = Date.parse(new Date());
			var tokens = '' + sjs + '' + datatime
			this.token = tokens
			//   this.type=uni.getStorageSync("type")
			//   this.form.v=uni.getStorageSync("v")
			if (!options.activityId) {
				// 跳转回原页面
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}


			} else {
				this.form.activityId = options.activityId
				this.form.userRef = uni.getStorageSync("userRef")
				this.getlist()
			}





		},
		methods: {
			failclose() {
				uni.navigateBack({
					delta: 1,
				});
			},
			goshop(url) {
				window.location.href = this.jumpShopLink
			},
			gohome() {
				uni.reLaunch({
					url: "/pages/home/index"
				})
			},
			async getlist() {
				this.inpayimg = null
				const resindex = await beginActivity(JSON.stringify(this.form))

				if (resindex.result == 0) {
					//   that.joinRecordId=resindex.activity.joinRecordId
					//   that.sportStep=resindex.activity.sportStep
					// that.whiteListId=resindex.activity.whiteListId
					// 				that.getdataobj(res.encryptedData,res.iv)
					this.joinRecordId = resindex.activity.joinRecordId
					this.whiteListId = resindex.activity.whiteListId
					this.inpayimg = resindex.activity.posterBackdropImg
					app.globalData.data.inpayimg = this.inpayimg
					this.signImg = resindex.activity.signImg
					this.shuoming = resindex.activity.rule
					this.sectionInfo.type_config.video_url = BASE_URL_IMAHE + resindex.activity.videoTutorial



				} else if (resindex.result == -100) {
					// -100 不在活动白名单
					this.noinshow = true

				} else if (resindex.result == -101) {
					// -101 已参与活动
					this.failshow = true

				} else if (resindex.result == -102) {
					// -101 已参与活动
					this.norsshow = true

				} else {
					uni.showToast({
						title: "数据错误",
						icon: "none"
					})
				}

				// 		const res=await getHistoryPage(JSON.stringify(this.form))
				// 		console.log(res)
				// this.toall=Math.ceil(res.page.count/res.page.pageSize)
				// this.historylist.push(...res.page.list)
				// this.form.pageNo++
			},
			//获取
			async cjfun() {
				// this.showpopup=true
				// return
				var data = {
					activityId: this.form.activityId,
					whiteListId: this.whiteListId,
					joinRecordId: this.joinRecordId,
					userRef: this.form.userRef,
					token: this.token,

				}
				var res = await signActivity(JSON.stringify(data))
				if (res.result == 0) {
					this.showpopup = true
					this.jumpShopLink = res.jumpShopLink
				} else {
					var sjs = this.randomWord()
					var datatime = Date.parse(new Date());
					var tokens = '' + sjs + '' + datatime
					this.token = tokens
				}

			},


			// 监听播放进度
			bindtimeupdate(e) {
				// return
				var currentTime = e.detail.currentTime; //当前进度
				var duration = e.detail.duration; //视频时长

				//视频播放完成后触发奖励保存接口
				let percent = 100; //播放进度百分比，可以改成 80 或者90等其它数字，到达时触发奖励保存
				// let percent = this.sectionInfo.type_config.video_complate_rate;
				let upper = duration * (percent / 100);
				if (currentTime >= upper) {
					this.reachFlag = 1
					if (this.isTo) {
						this.isTo = false; //isTo 奖励加锁，进入页面只能触发一次

						console.log('触发奖励请求接口');
						// this.$request(this.$api.Weike.sectionComplete, this.options).then((res) => {});
					}
				}

				// 禁止拖动进度条快进
				if (currentTime - this.historyTime > 2) {
					uni.showToast({
						title: '不能快进哦',
						icon: 'none',
					});
					let videoContext = wx.createVideoContext('myVideo');
					videoContext.seek(this.historyTime);
				}
				this.historyTime = currentTime;
			},
			randomWord() {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
					'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
					'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
					'x', 'y', 'z'
				];
				var nums = "";
				for (var i = 0; i < 20; i++) {
					var id = parseInt(Math.random() * 61);
					nums += chars[id]
				}
				return nums;
			},
		}
	}
</script>
<style scoped lang="scss">
	.party {
		width: 100%;
		height: 100vh;

		.party-bc {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			// align-items: center;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.party-view {
			width: 100%;
			position: absolute;
			top: 208rpx;
			left: 0rpx;
			text-align: center;

			#myVideo {
				width: 710rpx;
				height: 465rpx;

			}

			// .party-view-top{
			// 	font-size: 36rpx;
			// 	text-align: center;
			// 	font-weight: bold;
			// 	color: #8e110e;
			// 	margin-bottom: 45rpx;
			// }
		}
	}


	.bt-dk {
		width: 210rpx;
		height: 85rpx;
		// background-color: #8e110e;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 85rpx;
		margin: 485rpx auto 0rpx;
		position: relative;

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			// z-index: -1;
		}

		text {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			line-height: 85rpx;
		}

	}


	.popup {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.popup-k {
			image {
				width: 530rpx;
			}

			.bt {
				position: relative;
				width: 400rpx;
				height: 88rpx;
				background-color: #48db8d;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 88rpx;
				margin: -95rpx auto 0;
				z-index: 1;
				border-radius: 50rpx;
			}
		}
	}

	// 弹框
	.fail-k {
		width: 490rpx;
		height: 405rpx;
		box-sizing: border-box;
		// padding-top: 29rpx;
		text-align: center;
		background: url("/static/images/popup-icon.png") no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;

		.fail-title {
			padding-top: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.fail-content {
			padding-top: 29rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.fail-bt {
			margin: 55rpx auto 0rpx;
			width: 188rpx;
			height: 64rpx;
			background-color: #730017;
			font-size: 18rpx;
			color: #ffffff;
			border-radius: 35rpx;
			line-height: 64rpx;

		}

	}

	.fail-kan {
		padding-top: 120rpx;
	}

	.jnshow-k {
		width: 650rpx;
		height: auto;
		padding-bottom: 40rpx;

		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
		}
	}

	.po-k {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.payshow-k {
		width: 720rpx;
		height: auto;
		max-height: 90vh;
		// padding-bottom: 100rpx;
		position: relative;


		.jnshow-title {
			padding-top: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.jnshow-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
			padding: 0 20rpx;
			white-space: pre-wrap;
			text-align: left;
			padding-bottom: 200rpx;
		}

		.payshow-bt {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 50rpx;
			font-size: 20rpx;

			button {
				background-color: #f1c16e;
				padding: 20rpx 40rpx;
				color: #ffffff;
			}
		}
	}
</style>